<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
window.onload = function() {
  var data = {};
  var s = new WebSocket("ws://127.0.0.1:8000/chat");
  s.onopen = function() {
    s.send('New participant joined');
  };
  s.onmessage = function(e) {
    $("#chat").append("<div>" + e.data + "</div>");
  };
  $('#chatform').submit(function (evt) {
    var line = $('#chatform [type=text]').val()
    $('#chatform [type=text]').val('')
    s.send(line);
    return false;
  });
};
</script>
</head>
<body>
<h3>Chat!</h3>
<p>(Only tested in Chrome)</p>
<div id="chat" style="width: 60em; height: 20em; overflow:auto; border: 1px solid black">
</div>
<form id="chatform">
<input type="text" />
<input type="submit" />
</form>
</body>
</html>
